<template>
	<div class="login">
		<div class="login-page">
			<div class="login-page">
				<h1><img src="../../common/img/logo-left.png" width="239" height="30" /></h1>
				<div class="fl"><img src="../../common/img/login-left.png" width="639" height="400"></div>
				<div class="fr">
					<div class="wrapper text-center">
						<strong></strong>

					</div>
					<div class="text-center loginscreen  animated fadeInDown">

						<div class="login-title">用户登录</div>

						<form id="loginForm" class="m-t" role="form" novalidate  @submit.prevent="validateBeforeSubmit">
							<div class="login-margin">
								<input id="userName" placeholder="请输入用户名" name="name" type="text" class="form-control" v-model="name"  v-validate="'required|max:30'"  :class="{'input': true, 'is-danger': errors.has('name') }">
								<!--<i v-show="errors.has('name')" class="fa fa-warning"></i>-->
								<span v-show="errors.has('name')" class="info-error help is-danger"><Icon type="close-circled" class="closeIonic"></Icon>{{ errors.first('name') }}</span>
								<span class="form-control-feedback"><img src="../../common/img/name.png"></span>
							</div>
							<div class="login-margin">
								<input id="password" placeholder="请输入密码" name="password" type="password" class="form-control" v-model="password" v-validate="'required|max:6'" :class="{'input': true, 'is-danger': errors.has('coupon') }">
								<span v-show="errors.has('password')" class="info-error help is-danger"><Icon type="close-circled" class="closeIonic"></Icon>{{ errors.first('password') }}</span>
								<span class="form-control-feedback"><img src="../../common/img/pwd.png"></span>
							</div>
							<div class="login-margin login-img">
								<div class="col-sm-8 login-img-left" >
									<input id="imgCode" placeholder="验证码" name="imgCode" type="text" class="form-control" v-model="imgCode" v-validate="'required|max:4'"  :class="{'input': true, 'is-danger': errors.has('coupon') }">
									<span v-show="errors.has('imgCode')" class="info-error help is-danger"><Icon type="close-circled" class="closeIonic"></Icon>{{ errors.first('imgCode') }}</span>
								</div>
								<div id="imgCodeShow" class="col-sm-4 login-img-right">
									666
									<!--<img src="" ng-click="imgCodeShow($event)">-->
									<!--<img id="imgCode" src="http://192.168.1.72:80/tenancy-sys/admin/index/imgCode" title="看不清楚，换一张" id="img" onclick="img.src='http://192.168.1.72/tenancy-sys/admin/index/imgCode?RANDOMVALIDATECODEKEY='+new Date().getTime()" />-->
								</div>
								<p style="clear: both;"></p>
							</div>
							<button type="submit" class="btn btn-primary block full-width">登 录</button>
						</form>
					</div>
				</div>
				<div class="clear"></div>
			</div>

		</div>
		<div class="text-center footer">
			<p>
				<small class="text-bottom">盈家配置中心系统© 2017-2018</small>
			</p>
		</div>
		<!--<Button @click="login">登录</Button>-->
	</div>

</template>
<script>
  //  import { Validator } from 'vee-validate'
  export default {
    name: 'login',
    data () {
      return {
        name:'',
        password:'',
        coupon: '',
        imgCode:''
      }
    },
    created () {
    },
    methods: {
//      login (e) {
//      	this.$router.push({ path: '/welcome' })
//      },
      validateBeforeSubmit() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            // eslint-disable-next-line
            this.$router.push({ path: '/index' })
            return
          }
        })
      },
    }
  }
</script>
<style scoped>
	/*.login-page{*/
	/*background: url("../../common/img/login.jpg");*/
	/*}*/
	.login-page {
		width: 1000px;
		margin: 0 auto;
		position: fixed;
		top: 50%;
		margin-top: -280px;
		left: 50%;
		margin-left: -500px;
	}
	.login-page .fl {
		float: left;
		width: 639px;
	}
	.login-page .fr {
		float: right;
		width: 361px;
		background: #fff;
		border-radius: 4px;
	}
	.wrapper {
		padding: 0 20px;
	}
	.text-center {
		text-align: center;
	}
	.login-title {
		height: 70px;
		line-height: 70px;
		font-size: 20px;
		color: rgb(86, 86, 110);
		border-bottom: 1px solid rgba(86, 86, 110, 0.14902);
	}
	.login-page .fr form {
		padding: 0px 20px;
	}
	.login-margin {
		margin-bottom: 36px;
		position: relative;
	}
	.btn-primary {
		background-color: rgb(250, 111, 57);
		width: 80px;
		height: 44px;
		line-height: 30px;
		margin-bottom: 33px;
		color: rgb(255, 255, 255);
		border-color: rgb(250, 111, 57);
		border: 0;
		border-radius: 4px;
		outline: none;
	}
	.full-width {
		width: 100%;
	}
	.m-t {
		margin-top: 15px;
	}
	.form-control-feedback {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		display: block;
		width: 34px;
		height: 34px;
		line-height: 46px;
		text-align: center;
		pointer-events: none;
	}
	.form-control {
		display: block;
		width: 100%;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		outline: none;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
	.form-control, .single-line {
		height: 43px;
		background-color: rgb(255, 255, 255);
		background-image: none;
		color: rgb(86, 86, 110);
		display: block;
		width: 100%;
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(229, 230, 231);
		border-image: initial;
		border-radius: 8px;
		padding: 6px 12px;
		margin: 0px auto;
	}
	/*.login-img{*/
	/*height: 34px*/
	/*}*/
	.login-img-left{
		width: 66%;
		float: left;
	}
	.login-img-right{
		width: 33%;
		float: left;
	}
	.text-bottom {
		opacity: 0.6;
		font-size: 14px;
		color: #FFFFFF;
		position: fixed;
		bottom: 17px;
		margin-left: -100px;
	}
	.info-error {
		color: #FA6F39;
		display: block;
		margin-left: 5px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 100%;
		left: 0;
	}
	.closeIonic{
		margin-right: 6px;
	}
</style>